<template>
  <div style="width: 100%; height: 100%">
    <VueUiQuickChart :dataset="dataset" :config="config" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VueUiQuickChart } from 'vue-data-ui';
const dataset = ref([1, 2, 3, 5, 8, 13, 21, 34, 55, 89]);
const config = ref({
  responsive: true, // 是否缩放
  barAnimated: true, // 是否启用动画
  chartIsBarUnderDatasetLength: 6, // 如果设置 11 为 柱状图
  color: '#2D353C', // 图表文字颜色(除了图形上)
  dataLabelFontSize: 14, // 图形上的文字大小
  userOptionsButtons: { tooltip: true, pdf: true, img: true, fullscreen: true }, // 图表右上角按钮(工具箱工具)
  userOptionsButtonTitles: {
    // 图表右上角按钮(工具箱工具)的标题
    open: '工具箱子名称',
    close: '关闭按钮名称',
    tooltip: '鼠标悬浮提示',
    pdf: '导出 PDF',
    img: '导出 PNG',
    fullscreen: '全屏显示',
  },
  title: '',
  titleBold: true, // 标题加粗
  titleFontSize: 16, // 标题字体大小
  titleTextAlign: 'center', // 标题对齐方式
  tooltipCustomFormat: null, // 自定义 tooltip 格式
  tooltipBorderRadius: 4, // tooltip 圆角
  tooltipBorderColor: '#e1e5e8', // tooltip 边框颜色
  tooltipBorderWidth: 1, // tooltip 边框宽度
  tooltipFontSize: 14, // tooltip 字体大小
  tooltipBackgroundOpacity: 90, // tooltip 背景透明度
  tooltipPosition: 'center', // tooltip 位置
  tooltipOffsetY: 24, // tooltip Y 轴偏移
  showLegend: false, // 是否显示图例
  useCustomLegend: false, // 是否使用自定义图例
  valuePrefix: '', // 图形上数字前缀
  valueSuffix: '', // 图形上数字后缀
  xyAxisStroke: '#CCCCCC', // X/Y 轴颜色
  xyAxisStrokeWidth: 1, // X/Y 轴宽度
  xyGridStroke: '#e1e5e8', // X/Y 网格颜色
  xyGridStrokeWidth: 0.5, // X/Y 边框宽度
  xyHighlighterColor: '#000000', // X/Y 轴高亮背景颜色
  xyHighlighterOpacity: 0.05, // X/Y 轴高亮背景透明度
  xyLabelsXFontSize: 8, // X 轴标签字体大小
  xyLabelsYFontSize: 12, // Y 轴标签字体大小
  xyPaddingBottom: 48, // Y 轴底部留白
  xyPaddingLeft: 48, // X 轴左侧留白
  xyPaddingRight: 12, // X 轴右侧留白
  xyPaddingTop: 24, // Y 轴顶部留白
  xyPeriods: ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'], // X 轴标签日期格式
  xyPeriodLabelsRotation: 0, // X 轴标签日期旋转角度
  xyScaleSegments: 10, // X/Y 轴刻度分段数
  xyShowAxis: true, // 是否显示 X/Y 轴
  xyShowGrid: true, // 是否显示 X/Y 网格
  xyShowScale: true, // 是否显示 X/Y 轴刻度
  yAxisLabel: '', // Y 轴标签
  xAxisLabel: '', // X 轴标签
  axisLabelsFontSize: 12, // 轴标签字体大小
  zoomXy: false, // 是否启用缩放
  zoomColor: '#CCCCCC', // 缩放框颜色
  zoomHighlightColor: '#4A4A4A', // 缩放框高亮颜色
  zoomFontSize: 14, // 缩放框字体大小
  zoomUseResetSlot: false, // 是否显示缩放重置按钮
});
</script>

<style lang="scss" scoped></style>
